<template>
  <div class="create_form_box">
    <div class="create_form_content">
      <h3 class="createFormEdit_title">密码重置</h3>

      <a-form :form="form">
        <a-form-item label="电子邮箱">
          <a-input disabled v-decorator="['email', { rules: [{ required: true, message: '请输入账户电子邮箱!' }] }]" placeholder="请输入账户电子邮箱" />
        </a-form-item>
        <a-form-item label="密码">
          <a-input v-decorator="['password', { rules: [{ required: true, message: '请输入密码!' }] }]" placeholder="请输入密码" />
        </a-form-item>
        <a-form-item label="确认密码">
          <a-input v-decorator="['passwordRepeat', { rules: [{ required: true, message: '请输入密码!' }] }]" placeholder="请输入密码" />
        </a-form-item>

      </a-form>

      <div class="create_form_font">
        <a-button size="large" key="cancel" @click="createFormOk" style="margin-left:20px;">取消</a-button>
        <a-button
          size="large"
          key="forward"
          :loading="confirmLoading"
          type="primary"
          @click="handleAdd"
          style="margin-left:20px;">确定</a-button>
      </div>

    </div>

  </div>

</template>

<script>
import { postResetPassword } from '@/api/manage'
// import { domTitle } from '../../utils/domUtil'

export default {
  name: 'ActiveAccount',
  data () {
    return {
      confirmLoading: false,
      form: this.$form.createForm(this)
    }
  },
  created () {
    this.fetchEmail()
  },
  methods: {
    fetchEmail () {
      const email = this.$route.query.email
      setTimeout(() => {
        this.form.setFieldsValue({ email: email })
      }, 100)
    },
    handleAdd () {
      // eslint-disable-next-line handle-callback-err
      this.form.validateFields((err, values) => {
        console.log(values)

        if (!values) {
          return
        }

        if (!values['email'] || !values['password'] || !values['passwordRepeat']) {
          return
        }

        const email = values['email']
        const password = values['password']
        const passwordRepeat = values['passwordRepeat']

        if (password !== passwordRepeat) {
          this.$message.error('两次密码不一致！')
          return
        }

        this.confirmLoading = true
        const body = {
          email: email,
          password: password
        }

        postResetPassword(body).then(res => {
          console.log(res.message)
          this.confirmLoading = false
          if (res.code === 200) {
            this.$message.success(`密码（${email}）重置成功`)
            this.createFormOk()
          } else {
            this.$message.error(res.message)
          }
        })
      })
    },
    createFormOk () {
      this.$router.push('/user')
    }
  }
}
</script>
<style lang="less" >
  .crearteFormSuccess_title {
    .ant-modal-title {
      width: 160px;
      height: 24px;
      font-size: 24px;
      font-family: PingFangSC-Medium, Microsoft Yahei, sans-serif;
      font-weight: 700;
      color: rgba(0, 0, 0, 0.85);
      line-height: 24px;
    }
  }
  .crearteFormSuccess_box {
    text-align: center;
    img {
      width: 250px;
    }
    p {
      margin: 24px 0;
    }
    span {
      font-size: 24px;
      font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
      font-weight: 400;
      color: rgba(0, 0, 0, 1);
      line-height: 24px;
    }
    i {
      font-style: normal;
      font-size: 24px;
      font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
      font-weight: 400;
      color: #56ced1;
      line-height: 24px;
    }
    em {
      font-style: normal;
      font-size: 18px;
      font-family: PingFangSC-Regular, Microsoft Yahei, sans-serif;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.25);
      line-height: 29px;
    }
    button {
      outline: none;
      width: 112px;
      height: 40px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      border: 1px solid rgba(217, 217, 217, 1);
      font-weight: 700;
    }
    button:hover {
      background: #56ced1;
      opacity: 0.8;
    }
  }
  .create_form_box {
    overflow: hidden;
  }
  .create_form_content {
    margin: 24px 66px;
  }
  .create_form_font {
    float: right;
  }

  .create_form_item1_title {
    font-size: 16px;
    font-weight: 400;
    color: #000000;
    span {
      font-size: 17px;
      color: #d31e27;
    }
  }

  .form_style {
    width: 224px;
  }
  .createForm_count_time {
    min-width: 165px;
    margin-right: 20px;
  }
</style>
